<template>
  <div class="flex bg-white bg-opacity-60 backdrop-blur-md shadow-md">
    <div class="inline-flex items-center px-2 flex-grow border-0 border-b-2">
      <router-link to="/">
        <img class="hidden md:block" src="@/assets/img/logo_main.svg" width="140" />
        <img class="block md:hidden" src="@/assets/img/logo.svg" width="62" />
      </router-link>
    </div>
    <div class="flex justify-center items-center">
      <router-link
        v-for="item in tabMenuItems"
        :to="item.to"
        class="h-16 border-0 border-b-2 px-4 flex items-center text-gray-500 p-ripple ripple-indigo"
        :class="{ 'border-indigo-500': router_prefix === item.to, '!text-indigo-600': router_prefix === item.to }"
        v-ripple
      >
        <i :class="item.icon" />
        <span class="pl-1.5 hidden md:inline">{{ item.label }}</span>
      </router-link>
    </div>
    <div v-if="info" class="inline-flex flex-grow justify-end items-center border-0 border-b-2 p-2">
      <Avatar
        :image="info.avatar + '/thumb'"
        size="large"
        @click="toggle"
        class="cursor-pointer rounded-md overflow-hidden border-2"
      />
      <Menu ref="menu" :model="avatarMenuItems" :popup="true" />
    </div>
    <div v-else class="inline-flex flex-grow justify-end items-center border-0 border-b-2 p-2">
      <router-link to="/login">
        <Button label="登录" class="p-button-text p-button-sm" />
      </router-link>
      <router-link to="/register">
        <Button label="注册" class="p-button-text p-button-sm" />
      </router-link>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'Navbar'
})
</script>

<script lang="ts" setup>
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { useToast } from 'primevue/usetoast'
import { getLoginInfo } from '@/api/user/user'

import Button from 'primevue/button'
import Avatar from 'primevue/avatar'
import Menu from 'primevue/menu'
import { logout } from '@/api/auth/token'


const store = useStore()
const route = useRoute()
let toast = useToast()
const menu = ref()

const tabMenuItems = [
  {
    label: '首页',
    icon: 'far fa-home',
    to: '/'
  },
  {
    label: '设计师',
    icon: 'far fa-user-pen',
    to: '/designer'
  },
  {
    label: '资讯',
    icon: 'far fa-memo',
    to: '/article'
  }
]

const info = computed(() => {
  return store.state.user
})

const router_prefix = computed(() => {
  return route.path.indexOf('/', 1) > -1 ? route.path.substring(0, route.path.indexOf('/', 1)) : route.path
})

const avatarMenuItems = ref([
  {
    label: 'username',
    icon: 'far fa-user',
    items: [
      {
        label: '个人中心',
        icon: 'far fa-user',
        to: '/account'
      },
      {
        label: '退出登录',
        icon: 'far fa-sign-out-alt',
        command: () => {
          logout()
            .then(() => {
              store.commit('logout')
              toast.add({ severity: 'success', summary: '退出成功', detail: '正在跳转...', life: 3000 })
              setTimeout(() => {
                window.location.href = '/'
              }, 1000)
            })
            .catch(() => {
              toast.add({ severity: 'error', summary: '退出失败', detail: '请稍后重试', life: 3000 })
            })
        }
      }
    ]
  }
])

getLoginInfo()
  .then((res) => {
    store.commit('setLoginUser', res.data)
    avatarMenuItems.value[0].label = '欢迎您，' + res.data.username
    if (info.value.role.name === 'admin') {
      avatarMenuItems.value[0].items.splice(1, 0, {
        label: '管理中心',
        icon: 'far fa-gear',
        to: '/admin'
      })
    }
    else if (info.value.role.name === 'designer') {
      avatarMenuItems.value[0].items.splice(1, 0, {
        label: '设计师中心',
        icon: 'far fa-user-pen',
        to: '/designer/center'
      })
    }
    else if (info.value.role.name === 'enterprise') {
      avatarMenuItems.value[0].items.splice(1, 0, {
        label: '服装厂中心',
        icon: 'far fa-tshirt',
        to: '/enterprise/center'
      })
    }
    else if (info.value.role.name === 'supplier') {
      avatarMenuItems.value[0].items.splice(1, 0, {
        label: '面料商中心',
        icon: 'far fa-industry',
        to: '/supplier/center'
      })
    }
  })
  .catch(() => { })

function toggle(event: Event) {
  menu.value.toggle(event)
}
</script>

<style>
.ripple-indigo .p-ink {
  @apply bg-indigo-300 bg-opacity-30;
}
</style>